<template>
  <div id="example-gantt"></div>

</template>

<script setup lang="ts">

import { onMounted, ref } from 'vue'
import { MomentSvelteGanttDateAdapter, SvelteGantt, SvelteGanttDependencies, SvelteGanttTable } from 'svelte-gantt'
import moment from 'moment'

const loaded = ref(false)
const data = {
  rows: [
     {
      id: 3,
      label: "汽油国6M15B",
      label2: "E301",
      label3: "TV7156NM",
      label4: "MZEA11L-GEFNZC",
      label5: "LFMAL1CC8K0000027",
      label6: "0000157",
      label7: "195/65R15",
    }, {
      id: 4,
      label: "汽油国6M15B",
      label2: "E302",
      label3: "TV7156NM",
      label4: "MZEA11L-GEFNZC",
      label5: "LFMAL1CC5K0000017",
      label6: "0000158",
      label7: "195/65R15",
    }, {
      id: 5,
      label: "汽油国6M15B",
      label2: "E303",
      label3: "TV7156N",
      label4: "MZEA11L-GEXNBC",
      label5: "LFMAL1CC7K0000018",
      label6: "0000159",
      label7: "205/55R16",
    }
  ],
  tasks: [
    {
      id: 1,
      resourceId: 3,
      label: "MT试验ECU改写（FTRD）",
      from: time("2024-03-08"),
      to: time("2024-03-09"),
      classes: "blue",
    },
    {
      id: 2,
      resourceId: 3,
      label: "排放初期确认@FTRD",
      from: time("2024-03-11"),
      to: time("2024-03-13"),
      classes: "blue"
    },
    {
      id: 5,
      resourceId: 3,
      label: "天津运输",
      from: time("2024-03-13"),
      to: time("2024-03-14"),
      classes: "blue"
    },
    {
      id: 3,
      resourceId: 4,
      label: "MT磨合ECU改写（FTRD）",
      from: time("2024-03-08"),
      to: time("2024-03-09"),
      classes: "green"
    }, 
    {
      id: 4,
      resourceId: 4,
      label: "排放初期确认@FTRD",
      from: time("2024-03-09"),
      to: time("2024-03-11"),
      classes: "orange"
    },
    {
      id: 6,
      resourceId: 4,
      label: "天津运输",
      from: time("2024-03-11"),
      to: time("2024-03-12"),
      classes: "orange"
    },
    {
      id: 7,
      resourceId: 5,
      label: "CVT试验ECU改写（FTRD）",
      from: time("2024-03-08"),
      to: time("2024-03-09"),
      classes: "green"
    }, 
    {
      id: 8,
      resourceId: 5,
      label: "排放初期确认@FTRD",
      from: time("2024-03-09"),
      to: time("2024-03-11"),
      classes: "orange"
    },
    {
      id: 9,
      resourceId: 5,
      label: "天津运输",
      from: time("2024-03-11"),
      to: time("2024-03-12"),
      classes: "orange"
    },
  ],
  dependencies: []
}
const currentStart = time('2024-03-01')
const currentEnd = time('2024-03-31');
const tableHeaders:object[] = [
  { title: '式样', property: 'label', width: 140 },
  { title: '车号', property: 'label2', width: 70},
  { title: '车辆型号', property: 'label3', width: 100},
  { title: '车辆代号', property: 'label4', width: 160},
  { title: 'VIN', property: 'label5', width: 180},
  { title: 'ENG', property: 'label6', width: 90},
  { title: '轮胎规格', property: 'label7', width: 110},
]

const options = {
  dateAdapter: new MomentSvelteGanttDateAdapter(moment),
  rows: data.rows,
  tasks: data.tasks,
  dependencies: data.dependencies,
  columnUnit:"day",
  columnOffset: 1,
  magnetOffset: 1,
  rowHeight: 52,
  rowPadding: 6,
  headers: [{ unit: 'month', format: 'YYYY-MM', offset:1 }, { unit: 'day', format: 'DD', offset:1  }],
  fitWidth: true,
  minWidth: 800,
  from: currentStart,
  to: currentEnd,
  layout:"pack",  //用于将任务排列成行的布局   overlap-->重叠  pack-->不重叠
  tableHeaders: tableHeaders,
  tableWidth: 580,
  ganttTableModules: [SvelteGanttTable],
  ganttBodyModules: [SvelteGanttDependencies]
}

function time(input) {
  return moment(input, 'YYYY-MM-DD')
}

onMounted(() => {
  const gantt = new SvelteGantt({ target: document.getElementById('example-gantt'), props: options})
  loaded.value = true;
  gantt.api.tasks.on.move (task => console.log('Listener: task selected', task));

})

</script>

<style scoped></style>